<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  #outer{
   width:500px;
   margin:0 auto; 
   text-align:center;
  }
  #outer img{
    width:400px;
    height:300px;
  }
</style>
<script>
  window.onload=function(){
    var btn=document.getElementById('btn');
    btn.innerHTML="button";
    btn.onclick=function(){
      alert("别点");
      var bj=document.getElementById('bj');
      console.log(bj.innerHTML);
      var lis=document.getElementsByTagName('li');
      console.log(lis);
    }
  }
</script>
<body>
  <button id="btn" onmouseout="alert('TAO')">按钮</button>
  <ul>
    <li id="bj">北京</li>
    <li>南昌</li>
    <li>新余</li>
  </ul>
  <div id="outer">
    <p id="info"></p>
  <img src="img/4.jpg">
  <button id="pre">上一张</button>
  <button id="next">下一张</button>
  </div>
  <button id="btn">点击</button>
  <script>
    var pre=document.getElementById('pre');
    var next=document.getElementById('next');
    var img=document.getElementsByTagName("img")[0];
    var imgA=["img/1.jpg","img/2.jpg","img/3.jpg"];
    var index=0;
    var info=document.getElementById("info");
  
    pre.onclick=function(){
      index--;
      if(index<0){
        index=0;
      }
       img.src=imgA[index];
       info.innerHTML="当前第"+(index+1)+"张";
    }
    next.onclick=function(){
index++;
if(index>imgA.length-1){
  index=imgA.length-1;
}
img.src=imgA[index];
info.innerHTML="当前第"+(index+1)+"张";
    }
    myclick("btn",function(){
      var bj=document.getElementById("bj");
      var pn=bj.parentNode;
      alert(pn.innerHTML);
    })
  </script>
</body>
</html>